import React, { useState, useEffect, useRef } from "react";
import { Image, Button, message } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import { PlusOutlined } from "@ant-design/icons";
import ProTable from "@ant-design/pro-table";
import ProForm, { ModalForm } from "@ant-design/pro-form";
import { history, useLocation } from "umi";
import moment from "moment";
import useCommonTable from "@/hooks/useCommonTable";
import { fetchList } from "@/api/readRecord";

export default () => {
  const columns = [
    {
      title: "用户",
      dataIndex: "createUserName",
      search: false,
      width: 200,
    },
    {
      title: "发布时间",
      dataIndex: "createTime",
      search: false,
      width: 200,
    },
    {
      title: "书籍",
      dataIndex: "title",
      search: false,
      width: 300,

      render: (_, record) => {
        return (
          <>
            <Image width={80} height={80} src={record.picture} />
            <span style={{ marginLeft: 8 }}>{record.title}</span>
          </>
        );
      },
    },

    {
      title: "内容",
      search: false,
      dataIndex: "type",
      render: (_, record) => {
        return (
          <div style={{ display: "flex", alignItems: "center" }}>
            {record.textRecord && <div>{record.textRecord}</div>}

            {record.voiceRecord && (
              <audio
                style={{ marginLeft: 10 }}
                controls
                src={record.voiceRecord}
              ></audio>
            )}
            {record.videoRecord && (
              <video
                style={{ width: 200, height: 150, marginLeft: 10 }}
                controls
                src={record.videoRecord}
              ></video>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <PageContainer>
      {useCommonTable({
        columns,
        onlyColumns: true,
        modalWidth: 700,
        fetchList,
        renderEdit: (record) => {},
        renderAdd: () => {},
        layout: "horizontal",
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
